<template>
  <a-input
    :addon-after="addonAfter"
    :addon-before="addonBefore"
    :default-value="defaultValue"
    :disabled="disabled"
    :id="id"
    :max-length="maxLength"
    :prefix="prefix"
    :size="size"
    :suffix="suffix || lenSuffix"
    :type="type"
    :allow-clear="allowClear"
    v-model="sValue"
    :value="value"
    @change="onChange"
    @input="onInput"
    @pressEnter="onPressEnter"
    @keydown="onKeydown"
  >
    <template :slot="slot" v-for="slot in Object.keys($slots)">
      <slot :name="slot"></slot>
    </template>
  </a-input>
</template>

<script>
export default {
  name: 'IInput',
  model: {
    prop: 'value',
    event: 'change.value'
  },
  props: ['addonAfter', 'addonBefore', 'defaultValue', 'disabled', 'id', 'maxLength', 'prefix', 'size', 'suffix', 'type', 'value', 'allowClear'],
  data () {
    return {
      sValue: this.value || this.defaultValue || ''
    }
  },
  watch: {
    value (val) {
      this.sValue = val
    }
  },
  computed: {
    lenSuffix () {
      return this.maxLength && `${(this.sValue + '').length}/${this.maxLength}`
    }
  },
  methods: {
    onChange (e) {
      this.$emit('change', e)
      this.$emit('change.value', e.target.value)
    },
    onInput (e) {
      this.$emit('input', e)
    },
    onPressEnter (e) {
      this.$emit('pressEnter', e)
    },
    onKeydown (e) {
      this.$emit('keydown', e)
    }
  }
}
</script>
